<template>
    <view class="context">
        <view class="context-list context-first">
            <view class="context-item" :class="active[0] === i ? 'active' : ''" v-for="(v, i) in columns"
                :key="String(v.id)" @click="click(0, i, v.children)">
                <identifylabelitem :data="v" :active="!!value.includes(String(v.id))">
                </identifylabelitem>
            </view>
        </view>
        <view class="context-list  context-two">
            <view class="context-item" :class="active[1] === i ? 'active' : ''" v-for="(v, i) in columns2"
                :key="String(v.id)" @click="click(1, i, v.children)">
                <view>
                    {{ v.name }}
                </view>
            </view>
        </view>
        <view class="context-list context-three">
            <view class="context-item " :class="active[2] === i ? 'active' : ''" v-for="(v, i) in columns3"
                @click="click(2, i, v.children)">
                <view>
                    {{ v.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import api from '../../api/index'
import { deepTree } from '../../util/index'
import identifylabelitem from './aiidentifylabelitem.vue';
import { watch } from 'vue';
const p = withDefaults(defineProps<{ modelValue: string[], }>(), {
    modelValue: () => []
})

onMounted(() => {
    start()
})

const emit = defineEmits(['update:modelValue', 'change'])



function setdata(e: Eps.identifylabelEntity) {
    const index = value.value.findIndex(t => t === String(e.id))
    if (index > -1) {
        value.value.splice(index, 1)
    } else {
        value.value.push(String(e.id))
    }
}


const value = ref(p.modelValue)


const columns2 = ref<Eps.identifylabelEntity[]>([])
const columns3 = ref<Eps.identifylabelEntity[]>([])

const active = ref([-1, -1, -1])

function click(index: number, activeIndex: number, children: Eps.identifylabelEntity[] = []) {
    active.value[index] = activeIndex
    if (index === 0) {
        columns2.value = children
        columns3.value = []
    } else if (index === 1) {
        columns3.value = children
    } else if (index === 2) {
        setdata(columns3.value[activeIndex])
    }
}


const data = ref<Eps.identifylabelEntity[]>([])
const columns = ref<Eps.identifylabelEntity[]>([])
async function start() {
    api<Eps.identifylabelEntity[]>('/wechat/identifylabel/list').then(e => {
        data.value = e
        columns.value = deepTree(e)
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
}



watch(() => value.value, e => {
    emit('update:modelValue', e)
})



</script>

<style scoped lang="scss">
.context {
    display: flex;
    flex-wrap: wrap;
    min-height: 100%;

    .context-list {
        flex: 1;

        .context-item {
            height: 80rpx;
            padding-left: 24rpx;
            line-height: 80rpx;
            overflow: hidden;
            font-size: 12px;
        }
    }

    .context-first {
        background-color: rgba(242, 244, 250, 1);

        .active {
            background-color: rgba(255, 255, 255, 1);
        }
    }

    .context-two {
        .context-item {
            border-bottom: 1rpx solid rgba(217, 217, 217, 1);
        }

        .active {
            color: $uni-color-primary;
        }

        border-left: 1rpx solid $uni-text-color-grey;
        border-right: 1rpx solid $uni-text-color-grey;


    }

    .context-three {
        .active {
            background-color: rgba(255, 240, 235, 1);
        }
    }


}
</style>